import { useState } from 'react';
import { Card, Row, Col, Button, Modal, Steps, Alert } from 'antd';
import { useNavigate } from 'react-router-dom';
import { PlusOutlined, ShoppingCartOutlined, ShopOutlined, LinkOutlined, BarChartOutlined, FileTextOutlined, PhoneOutlined } from '@ant-design/icons';
import { kefu1, daifa, kefu2 } from '../assets/images/base64';
export default function Home() {
  const navigate = useNavigate();
  const [addShopVisible, setAddShopVisible] = useState(false);
  const [douyinAuthVisible, setDouyinAuthVisible] = useState(false);
  const [kuaishouAuthVisible, setKuaishouAuthVisible] = useState(false);

  const handleAddShop = (platform: string) => {
    console.log('添加店铺平台:', platform);
    setAddShopVisible(false);
    if (platform === 'douyin') {
      setDouyinAuthVisible(true);
    } else if (platform === 'kuaishou') {
      setKuaishouAuthVisible(true);
    }
  };

  // 抖音授权相关函数
  const handleDouyinBuyService = () => {
    window.open("https://fuwu.jinritemai.com/detail?service_id=23297");
  };

  const handleDouyinAuthorize = () => {
    const userInfo = JSON.parse(localStorage.getItem('user') || '{}');
    const userId = userInfo.userId || 'unknown';
    window.open(
      `https://fuwu.jinritemai.com/authorize?service_id=23297&state=fx_${userId}`
    );
    Modal.confirm({
      title: '提示',
      content: '是否授权成功?',
      onOk: () => {
        setDouyinAuthVisible(false);
      },
      onCancel: () => { }
    });
  };

  // 快手授权相关函数
  const handleKuaishouBuyService = () => {
    window.open("https://fuwu.kwaixiaodian.com/new/detail?id=21310148548146");
  };

  const handleKuaishouAuthorize = () => {
    const userInfo = JSON.parse(localStorage.getItem('user') || '{}');
    const userId = userInfo.userId || 'unknown';
    window.open(
      `https://open.kwaixiaodian.com/oauth/authorize?app_id=ks689895171327135709&redirect_uri=https%3A%2F%2Fkwai.jiayia.com%2F%23%2Fdflogin&scope=merchant_refund,merchant_item,merchant_order,user_info,merchant_dropshipping,merchant_item_basic,merchant_servicemarket,merchant_user,merchant_comment,merchant_logistics&response_type=code&state=fx_${userId}`
    );
    Modal.confirm({
      title: '提示',
      content: '是否授权成功?',
      onOk: () => {
        setKuaishouAuthVisible(false);
      },
      onCancel: () => { }
    });
  };

  return (
    <div style={{ padding: '20px' }}>
      <Row gutter={[16, 16]}>
        {/* 添加店铺 */}
        <Col span={6}>
          <Card title="添加店铺" style={{ height: '230px' }}>
            <div style={{ marginBottom: '20px' }}>
              <p style={{ margin: 0, color: '#666' }}>添加店铺后可管理商品、处理订单</p>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ display: 'flex', gap: '20px' }}>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ width: '40px', height: '40px', backgroundColor: '#1890ff', borderRadius: '50%', margin: '0 auto 8px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: '16px' }}>抖</div>
                  <span style={{ fontSize: '12px' }}>抖音</span>
                </div>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ width: '40px', height: '40px', backgroundColor: '#e60012', borderRadius: '50%', margin: '0 auto 8px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: '16px' }}>快</div>
                  <span style={{ fontSize: '12px' }}>快手</span>
                </div>
              </div>
              <Button type="primary" icon={<PlusOutlined />} onClick={() => setAddShopVisible(true)} style={{ backgroundColor: '#ff6900', borderColor: '#ff6900' }}>
                添加店铺
              </Button>
            </div>
          </Card>
        </Col>

        {/* 其他信息 */}
        <Col span={6}>
          <Card title="客服信息" style={{ height: '230px' }}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ marginBottom: '5px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <PhoneOutlined style={{ marginRight: '8px', color: '#666' }} />
                <span style={{ fontSize: '12px', color: '#666' }}>联系电话：17703111776</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ width: '80px', height: '80px', backgroundColor: '#f5f5f5', borderRadius: '8px', margin: '0 auto 3px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <img width={80} height={80} src={kefu1} alt="" />
                  </div>
                  <div style={{ fontSize: '12px', color: '#666' }}>微信交流群</div>
                </div>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ width: '80px', height: '80px', backgroundColor: '#f5f5f5', borderRadius: '8px', margin: '0 auto 3px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <img width={80} height={80} src={kefu2} alt="" />
                  </div>
                  <div style={{ fontSize: '12px', color: '#666' }}>在线客服</div>
                </div>
              </div>
            </div>
          </Card>
        </Col>


        {/* 1688代发选品中心 */}
        <Col span={12}>
          <div style={{ height: '230px' }}>
            <img style={{objectFit: 'contain'}} width='100%' height='100%' src={daifa} alt="" />
          </div>
        </Col>
        {/* 订单详情 */}
        <Col span={12}>
          <Card title="订单详情" style={{ height: '200px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '100%' }}>
              <div style={{ textAlign: 'center', flex: 1 }}>
                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#1890ff' }}>0</div>
                <div style={{ fontSize: '12px', color: '#666' }}>待采购</div>
              </div>
              <div style={{ textAlign: 'center', flex: 1 }}>
                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#52c41a' }}>0</div>
                <div style={{ fontSize: '12px', color: '#666' }}>待付款</div>
              </div>
              <div style={{ textAlign: 'center', flex: 1 }}>
                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#faad14' }}>0</div>
                <div style={{ fontSize: '12px', color: '#666' }}>待发货</div>
              </div>
              <div style={{ textAlign: 'center', flex: 1 }}>
                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#722ed1' }}>0</div>
                <div style={{ fontSize: '12px', color: '#666' }}>已发货</div>
              </div>
              <div style={{ textAlign: 'center', flex: 1 }}>
                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#f5222d' }}>0</div>
                <div style={{ fontSize: '12px', color: '#666' }}>退款中</div>
              </div>
            </div>
          </Card>
        </Col>

        {/* 铺货日志 */}
        <Col span={12}>
          <Card title="铺货日志" style={{ height: '200px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '100%' }}>
              <div style={{ textAlign: 'center', flex: 1 }}>
                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#1890ff' }}>0</div>
                <div style={{ fontSize: '12px', color: '#666' }}>全部</div>
              </div>
              <div style={{ textAlign: 'center', flex: 1 }}>
                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#faad14' }}>0</div>
                <div style={{ fontSize: '12px', color: '#666' }}>铺货中</div>
              </div>
              <div style={{ textAlign: 'center', flex: 1 }}>
                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#52c41a' }}>0</div>
                <div style={{ fontSize: '12px', color: '#666' }}>铺货成功</div>
              </div>
              <div style={{ textAlign: 'center', flex: 1 }}>
                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#f5222d' }}>0</div>
                <div style={{ fontSize: '12px', color: '#666' }}>铺货失败</div>
              </div>
            </div>
          </Card>
        </Col>

        {/* 下单 */}
        <Col span={12}>
          <Card title="下单" style={{ height: '200px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', height: '100%' }}>
              <div style={{ textAlign: 'center', cursor: 'pointer' }} onClick={() => navigate('/trade/fenxiao')}>
                <div style={{ width: '60px', height: '60px', backgroundColor: '#1890ff', borderRadius: '50%', margin: '0 auto 12px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <FileTextOutlined style={{ fontSize: '24px', color: 'white' }} />
                </div>
                <div style={{ fontSize: '12px', color: '#666' }}>分销订单</div>
              </div>
              <div style={{ textAlign: 'center', cursor: 'pointer' }} onClick={() => navigate('/shop/list')}>
                <div style={{ width: '60px', height: '60px', backgroundColor: '#faad14', borderRadius: '50%', margin: '0 auto 12px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <ShopOutlined style={{ fontSize: '24px', color: 'white' }} />
                </div>
                <div style={{ fontSize: '12px', color: '#666' }}>店铺管理</div>
              </div>
            </div>
          </Card>
        </Col>

        {/* 铺货 */}
        <Col span={12}>
          <Card title="铺货" style={{ height: '200px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', height: '100%' }}>
              <div style={{ textAlign: 'center', cursor: 'pointer' }} onClick={() => navigate('/copy/item')}>
                <div style={{ width: '60px', height: '60px', backgroundColor: '#f5222d', borderRadius: '50%', margin: '0 auto 12px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <LinkOutlined style={{ fontSize: '24px', color: 'white' }} />
                </div>
                <div style={{ fontSize: '12px', color: '#666' }}>链接铺货</div>
              </div>
              <div style={{ textAlign: 'center', cursor: 'pointer' }} onClick={() => navigate('/copy/log')}>
                <div style={{ width: '60px', height: '60px', backgroundColor: '#52c41a', borderRadius: '50%', margin: '0 auto 12px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <BarChartOutlined style={{ fontSize: '24px', color: 'white' }} />
                </div>
                <div style={{ fontSize: '12px', color: '#666' }}>铺货记录</div>
              </div>
              <div style={{ textAlign: 'center', cursor: 'pointer' }} onClick={() => navigate('/goods/filter')}>
                <div style={{ width: '60px', height: '60px', backgroundColor: '#1890ff', borderRadius: '50%', margin: '0 auto 12px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <ShoppingCartOutlined style={{ fontSize: '24px', color: 'white' }} />
                </div>
                <div style={{ fontSize: '12px', color: '#666' }}>货源中心</div>
              </div>
            </div>
          </Card>
        </Col>

      </Row>

      {/* 添加店铺弹窗 */}
      <Modal
        title="添加店铺"
        open={addShopVisible}
        onCancel={() => setAddShopVisible(false)}
        footer={null}
        width={500}
      >
        <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', padding: '20px 0' }}>
          {/* 抖音 */}
          <div
            style={{
              width: 180,
              height: 180,
              border: '1px solid #ececec',
              borderRadius: 5,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <div
              style={{
                width: '100%',
                height: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <div style={{ width: 60, height: 60, backgroundColor: '#000', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: '24px' }}>抖</div>
            </div>
            <div style={{ border: '1px solid #ececec', width: '80%', margin: '10px 0' }}></div>
            <div
              style={{
                width: '100%',
                height: '49%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Button
                type="primary"
                onClick={() => handleAddShop('douyin')}
              >
                添加抖音
              </Button>
            </div>
          </div>

          {/* 快手 */}
          <div
            style={{
              width: 180,
              height: 180,
              border: '1px solid #ececec',
              borderRadius: 5,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <div
              style={{
                width: '100%',
                height: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <div style={{ width: 60, height: 60, backgroundColor: '#ff6900', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: '24px' }}>快</div>
            </div>
            <div style={{ border: '1px solid #ececec', width: '80%', margin: '10px 0' }}></div>
            <div
              style={{
                width: '100%',
                height: '49%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Button
                type="primary"
                onClick={() => handleAddShop('kuaishou')}
              >
                添加快手
              </Button>
            </div>
          </div>
        </div>
      </Modal>

      {/* 抖音授权弹窗 */}
      <Modal
        title="抖音店铺授权"
        open={douyinAuthVisible}
        onCancel={() => setDouyinAuthVisible(false)}
        footer={null}
        width="70%"
      >
        <div className="add-shop-pc">
          {/* 提示信息 */}
          <Alert
            message={
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <div style={{ marginRight: 16 }}>
                  <div style={{ width: 50, height: 15, backgroundColor: '#ff6900', borderRadius: '2px' }}></div>
                </div>
                <div>
                  <div>需订购[灵猴分销铺货]，订购[灵猴一键下单]订单回流</div>
                  <div style={{ marginTop: 6 }}>
                    灵猴分销铺货订购费低至0元/月，灵猴一键下单(免费试用7天)15元/月
                  </div>
                </div>
              </div>
            }
            type="warning"
            style={{ marginBottom: 15 }}
          />

          {/* 授权步骤 */}
          <Steps
            direction="vertical"
            items={[
              {
                title: (
                  <div style={{ lineHeight: '30px' }}>
                    <div>步骤一</div>
                    <div style={{ color: '#31373d' }}>
                      订购【灵猴分销铺货】 + 抖音【灵猴一键下单】获取订单回流权限
                    </div>
                    <div style={{ color: '#999' }}>
                      需前往抖店服务市场订购【灵猴一键下单】
                    </div>
                    <div>
                      <Button
                        type="primary"
                        size="small"
                        onClick={handleDouyinBuyService}
                        style={{ marginRight: 8 }}
                      >
                        立即订购
                      </Button>
                      <Button
                        size="small"
                        onClick={handleDouyinAuthorize}
                      >
                        已订购去授权
                      </Button>
                    </div>
                  </div>
                ),
              },
              {
                title: (
                  <div style={{ lineHeight: '30px' }}>
                    <div>步骤二</div>
                    <div style={{ color: '#31373d' }}>授权成功，开始下单</div>
                    <div style={{ color: '#999' }}>提示授权成功后返回软件，即可操作</div>
                  </div>
                ),
              },
            ]}
          />
        </div>
      </Modal>

      {/* 快手授权弹窗 */}
      <Modal
        title="快手店铺授权"
        open={kuaishouAuthVisible}
        onCancel={() => setKuaishouAuthVisible(false)}
        footer={null}
        width="70%"
      >
        <div className="add-shop-pc">
          {/* 提示信息 */}
          <Alert
            message={
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <div style={{ marginRight: 16 }}>
                  <div style={{ width: 50, height: 15, backgroundColor: '#ff6900', borderRadius: '2px' }}></div>
                </div>
                <div>
                  <div>需订购[灵猴分销铺货]，订购[灵猴采购代发]订单回流</div>
                  <div style={{ marginTop: 6 }}>
                    灵猴分销铺货订购费低至0元/月，灵猴采购代发(免费试用7天)20元/月
                  </div>
                </div>
              </div>
            }
            type="warning"
            style={{ marginBottom: 15 }}
          />

          {/* 授权步骤 */}
          <Steps
            direction="vertical"
            items={[
              {
                title: (
                  <div style={{ lineHeight: '30px' }}>
                    <div>步骤一</div>
                    <div style={{ color: '#31373d' }}>
                      订购【灵猴分销铺货】 + 快手【灵猴采购代发】获取订单回流权限
                    </div>
                    <div style={{ color: '#999' }}>
                      需前往快手服务市场订购【灵猴采购代发】
                    </div>
                    <div>
                      <Button
                        type="primary"
                        size="small"
                        onClick={handleKuaishouBuyService}
                        style={{ marginRight: 8 }}
                      >
                        立即订购
                      </Button>
                      <Button
                        size="small"
                        onClick={handleKuaishouAuthorize}
                      >
                        已订购去授权
                      </Button>
                    </div>
                  </div>
                ),
              },
              {
                title: (
                  <div style={{ lineHeight: '30px' }}>
                    <div>步骤二</div>
                    <div style={{ color: '#31373d' }}>授权成功，开始下单</div>
                    <div style={{ color: '#999' }}>提示授权成功后返回软件，即可操作</div>
                  </div>
                ),
              },
            ]}
          />
        </div>
      </Modal>
    </div>
  );
}
